<template>
  <div style="position: relative">
    <blog-item
      class="ItemTestzz"
      v-for="(item, index) in content"
      :key="item.id"
      :title="item.title"
      :time="parseInt(item.time)"
      :img="item.img"
      :abstract="item.abstract"
      :seeNum="item.seeNum"
      :collectNum="item.collectNum"
      :goodNum="item.goodNum"
      :way="item.way"
      :id="item.id"
      :index="index"
      @click.native="getId(item.id)"
      @mouseenter.native="live2dToMessage(item.title)"
    ></blog-item>
    <pagenation
      v-show="content.length > 0"
      ref="pagenationDom"
      :total="total"
      :clickEvent="getPageBlogList"
    ></pagenation>
    <div
      style="
        text-align: center;
        line-height: 40px;
        font-size: 13px;
        font-weight: 200;
        color: #555;
      "
    >
      <a href="https://beian.miit.gov.cn" target="_blank">鄂ICP备20011118号-1</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import pagenation from "../../components/pagenation.vue";
import BlogItem from "./blog.vue";
import $axios from "@/http";
import { Tblog } from "@/type/blog";
import Bus from "@/bus";
import { ref, onMounted, onUnmounted } from "vue";
let content = ref<Tblog[]>([]);
let id = ref<number>(0);
const total = ref<number>(0);
let timer = ref<number | null>(null);
const pagenationDom = ref<any>(null);
const way = ref<string | undefined>(undefined);
const title = ref<string | undefined>(undefined);
onMounted(() => {
  searchBlogByWay();
});
const live2dToMessage = (title: string) => {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    Bus.$emit("BlogTitleTipAboutLive2d", title);
  }, 100);
};

const getId = (index: number) => {
  id.value = index;
};
const getPageBlogList = (pageNum: number, pageSize: number) => {
  $axios
    .get("/blog/pagelist", {
      params: {
        pageNum,
        pageSize,
        way: way.value,
        title: title.value,
      },
    })
    .then((res) => {
      content.value = res.data.data.recordList || [];
      total.value = res.data.data.total || 0;
    });
};
const searchBlogByWay = () => {
  Bus.$on("searchByWay", (msg: string) => {
    if (msg === way.value) return;
    way.value = msg;
    const { pageSize } = pagenationDom.value;
    pagenationDom.value.pageNum = 1;
    getPageBlogList(1, pageSize);
  });
};
onUnmounted(() => {
  Bus.$off("searchByWay");
});
</script>

<style lang="scss" scoped>
.labelc {
  position: absolute;
  top: 80px;
  left: 0px;
}
</style>
